import React, {useState} from 'react'

export default function CounterHook() {
    /**
     * Hook: useState
     *  > 本身是一个函数，来自react包中
     *  > 参数和返回值: 
     *     1. 参数： 作用是给创建出来的状态一个默认值
     *     2. 返回值  是一个数组：数组中包含两个元素，
     *          第一个元素是state，当前状态的值，如果想要获取状态，就取数组的第0个元素 const state = arr[0];
     *          第二个元素是设置新值时使用的一个函数 const setState = arr[1];
     *    
     */

     const  arr = useState(0);
     const state = arr[0];
     const setState = arr[1];

    return (
        <div>
            <h2>计数器：{state}</h2>
            <button onClick={e => setState(state + 1)}>+1</button>
            <button onClick={e => setState(state - 1)}>-1</button>
        </div>
    )
}
